<template>
  <view class="detail-page">
    <!-- 图片轮播 -->
    <swiper class="image-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(image, index) in productInfo.images" :key="index">
        <image :src="image" class="swiper-image" mode="aspectFill" @tap="openImageGallery(index)"></image>
      </swiper-item>
    </swiper>

    <!-- 价格和基本信息 -->
    <view class="price-section">
      <view class="price-row">
        <text class="current-price">¥{{ productInfo.price }}</text>
        <text class="original-price" v-if="productInfo.originalPrice">¥{{ productInfo.originalPrice }}</text>
        <text class="discount" v-if="productInfo.discount">{{ productInfo.discount }}折</text>
      </view>
      <text class="product-title">{{ productInfo.title }}</text>
      <text class="product-subtitle">{{ productInfo.subtitle }}</text>
    </view>

    <!-- 促销信息 -->
    <view class="promotion-section" v-if="productInfo.promotions && productInfo.promotions.length">
      <text class="section-label">促销</text>
      <view class="promotion-list">
        <view class="promotion-item" v-for="(promotion, index) in productInfo.promotions" :key="index">
          <text class="promotion-tag">{{ promotion.tag }}</text>
          <text class="promotion-desc">{{ promotion.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 规格选择 -->
    <view class="spec-section" @tap="showSpecPicker">
      <view class="spec-header">
        <text class="section-label">规格</text>
        <text class="selected-spec" v-if="selectedSpec">{{ selectedSpec.name }}</text>
        <text class="placeholder" v-else>请选择规格</text>

      </view>
    </view>

    <!-- 商品属性 -->
    <view class="attribute-section">
      <text class="section-title">商品属性</text>
      <view class="attribute-list">
        <view class="attribute-item" v-for="(attr, index) in productInfo.attributes" :key="index">
          <text class="attr-name">{{ attr.name }}</text>
          <text class="attr-value">{{ attr.value }}</text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail-section">
      <text class="section-title">商品详情</text>
      <view class="detail-content">
        <text class="detail-text">{{ productInfo.detail }}</text>
        <view class="detail-images">
          <image
              v-for="(img, index) in productInfo.detailImages"
              :key="index"
              :src="img"
              mode="widthFix"
              class="detail-image"
              @tap="openDetailImageGallery(index)"
          ></image>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-group">
<!--        <view class="action-item" @tap="goToHome">-->
<!--          <text class="icon">🏠</text>-->
<!--          <text class="label">首页</text>-->
<!--        </view>-->
<!--        <view class="action-item" @tap="toggleFavorite">-->
<!--          <text class="icon" :class="{favorited: isFavorited}">❤️</text>-->
<!--          <text class="label">收藏</text>-->
<!--        </view>-->
<!--        <view class="action-item" @tap="goToCart">-->
<!--          <text class="icon">🛒</text>-->
<!--          <text class="label">购物车</text>-->
<!--        </view>-->
      </view>
      <view class="button-group">
<!--        <button class="add-cart-btn" @tap="addToCart">加入购物车</button>-->
        <button class="buy-now-btn" @tap="buyNow">收藏</button>
      </view>
    </view>

    <!-- 规格选择弹窗 -->
    <view class="spec-picker" :class="{active: showSpec}">
      <view class="spec-picker-header">
        <view class="product-info">
          <image :src="productInfo.images[0]" class="picker-product-image"></image>
          <view class="picker-product-details">
            <text class="picker-price">¥{{ productInfo.price }}</text>
            <text class="picker-stock">库存{{ productInfo.stock }}件</text>
          </view>
        </view>
        <text class="close-picker" @tap="closeSpecPicker">✕</text>
      </view>

      <scroll-view class="spec-picker-content" scroll-y>
        <view class="spec-option" v-for="(spec, index) in productInfo.specs" :key="index">
          <text class="spec-name">{{ spec.name }}</text>
          <view class="spec-values">
            <text
                v-for="(value, valueIndex) in spec.values"
                :key="valueIndex"
                class="spec-value"
                :class="{selected: selectedSpec && selectedSpec.id === value.id}"
                @tap="selectSpec(value)"
            >
              {{ value.name }}
            </text>
          </view>
        </view>
      </scroll-view>

      <view class="spec-picker-actions">
        <button class="confirm-btn" @tap="confirmSpec">收藏</button>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="overlay" :class="{active: showSpec}" @tap="closeSpecPicker"></view>

    <!-- 全屏图片画廊弹窗 -->
    <view v-if="showGallery" class="gallery-overlay" @tap="closeGallery">
      <view class="gallery-container" @tap.stop.prevent>
        <!-- 全屏图片容器 -->
        <view class="gallery-fullscreen"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd">
          <image
              :src="currentImage"
              class="gallery-image"
              :style="imageStyle"
              mode="aspectFit"
              @tap.stop.prevent="handleImageTap"
          ></image>
        </view>

        <!-- 顶部信息栏 -->
        <view class="gallery-header">
          <text class="gallery-index">{{ currentImageIndex + 1 }}/{{ galleryImages.length }}</text>
          <view class="gallery-actions">
            <text class="gallery-action" @tap="resetTransform">重置</text>
            <text class="gallery-close" @tap="closeGallery">✕</text>
          </view>
        </view>

        <!-- 底部指示器 -->
        <view class="gallery-footer">
          <view class="gallery-dots">
            <view
                v-for="(image, index) in galleryImages"
                :key="index"
                class="gallery-dot"
                :class="{ active: currentImageIndex === index }"
                @tap="switchImage(index)"
            ></view>
          </view>
        </view>

        <!-- 左右切换箭头 -->
        <view v-if="galleryImages.length > 1" class="gallery-arrows">
          <text class="gallery-arrow gallery-arrow-left" @tap="prevImage" :class="{ disabled: currentImageIndex === 0 }">‹</text>
          <text class="gallery-arrow gallery-arrow-right" @tap="nextImage" :class="{ disabled: currentImageIndex === galleryImages.length - 1 }">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.detail-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.image-swiper {
  height: 400rpx;
  .swiper-image {
    width: 100%;
    height: 100%;
  }
}

.price-section {
  background-color: #fff;
  padding: 30rpx;
  .price-row {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
  }
  .current-price {
    font-size: 48rpx;
    color: #e4393c;
    font-weight: bold;
    margin-right: 20rpx;
  }
  .original-price {
    font-size: 28rpx;
    color: #999;
    text-decoration: line-through;
    margin-right: 20rpx;
  }
  .discount {
    font-size: 24rpx;
    color: #e4393c;
    background-color: #ffe6e7;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
  }
  .product-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }
  .product-subtitle {
    font-size: 26rpx;
    color: #666;
    display: block;
  }
}

.promotion-section, .spec-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;
  .section-label {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-right: 20rpx;
  }
}

.promotion-list {
  margin-top: 16rpx;
  .promotion-item {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    .promotion-tag {
      font-size: 22rpx;
      color: #e4393c;
      background-color: #ffe6e7;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      margin-right: 12rpx;
    }
    .promotion-desc {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.spec-section {
  .spec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .selected-spec {
    font-size: 26rpx;
    color: #333;
    flex: 1;
    text-align: right;
    margin-right: 16rpx;
  }
  .placeholder {
    font-size: 26rpx;
    color: #999;
    flex: 1;
    text-align: right;
    margin-right: 16rpx;
  }
  .arrow {
    font-size: 28rpx;
    color: #999;
  }
}

.attribute-section, .detail-section {
  background-color: #fff;
  padding: 30rpx;
  margin-top: 20rpx;
  .section-title {
    font-size: 26rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
}

.attribute-list {
  .attribute-item {
    display: flex;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    .attr-name {
      font-size: 24rpx;
      color: #999;
      width: 160rpx;
    }
    .attr-value {
      font-size: 24rpx;
      color: #333;
      flex: 1;
    }
  }
  .attribute-item:last-child {
    border-bottom: none;
  }
}

.detail-content {
  .detail-text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    display: block;
    margin-bottom: 30rpx;
  }
  .detail-images {
    .detail-image {
      width: 100%;
      margin-bottom: 20rpx;
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .action-group {
    display: flex;
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 30rpx;
      .icon {
        font-size: 36rpx;
        margin-bottom: 8rpx;
      }
      .icon.favorited {
        color: #e4393c;
      }
      .label {
        font-size: 22rpx;
        color: #666;
      }
    }
  }

  .button-group {
    display: flex;
    gap: 16rpx;

    .add-cart-btn, .buy-now-btn {
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .add-cart-btn {
      background-color: #ff9500;
      color: #fff;
    }

    .buy-now-btn {
      background-color: #e4393c;
      color: #fff;
    }
  }
}

/* 规格选择弹窗 */
.spec-picker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.spec-picker.active {
  transform: translateY(0);
}

.spec-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .product-info {
    display: flex;
    .picker-product-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    .picker-product-details {
      display: flex;
      flex-direction: column;
      .picker-price {
        font-size: 36rpx;
        color: #e4393c;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      .picker-stock {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .close-picker {
    font-size: 36rpx;
    color: #999;
    padding: 10rpx;
  }
}

.spec-picker-content {
  flex: 1;
  padding: 0 30rpx;
  max-height: 50vh;
}

.spec-option {
  margin: 30rpx 0;
  .spec-name {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  .spec-values {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    .spec-value {
      padding: 16rpx 30rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #333;
      &.selected {
        background-color: #e4393c;
        color: #fff;
      }
    }
  }
}

.quantity-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1rpx solid #f5f5f5;
  .quantity-label {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  .quantity-controls {
    display: flex;
    align-items: center;
    .quantity-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      font-size: 32rpx;
      color: #333;
    }
    .quantity-value {
      margin: 0 20rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.spec-picker-actions {
  padding: 20rpx 30rpx;
  .confirm-btn {
    width: 100%;
    background-color: #e4393c;
    color: #fff;
    border-radius: 40rpx;
    padding: 24rpx;
    font-size: 28rpx;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 99;
  display: none;
}

.overlay.active {
  display: block;
}

/* 图片画廊样式 */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.gallery-fullscreen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.gallery-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
  position: absolute;
}

.gallery-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40rpx 30rpx 20rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-index {
  font-size: 32rpx;
  font-weight: 500;
}

.gallery-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.gallery-action {
  font-size: 28rpx;
  color: white;
  padding: 12rpx 20rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 20rpx;
}

.gallery-close {
  font-size: 44rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.gallery-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 40rpx;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

.gallery-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s ease;

  &.active {
    background: #fff;
    transform: scale(1.2);
  }
}

.gallery-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 2;
}

.gallery-arrow {
  font-size: 60rpx;
  color: white;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: all 0.3s ease;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &:active {
    background: rgba(255,255,255,0.4);
  }
}
</style>

<script>
export default {
  data() {
    return {
      productInfo: {
        title: '科勒清舒宝盖板系列C3-510/C3-129+滤水壶赠品',
        subtitle: '智能盖板+滤水壶组合 舒适体验',
        images: [
          '/static/banner/banner1.jpeg',
          '/static/banner/banner2.jpeg',
          '/static/banner/banner3.jpeg',
        ],
        price: '3499',
        originalPrice: '3999',
        discount: '8.7',
        stock: 100,
        promotions: [
          { tag: '满减', desc: '满3000减200' },
          { tag: '赠品', desc: '赠送滤水壶' },
          { tag: '券', desc: '领取100元优惠券' }
        ],
        attributes: [
          { name: '品牌', value: '科勒 KOHLER' },
          { name: '型号', value: 'C3-510/C3-129' },
          { name: '材质', value: 'PP塑料+不锈钢' },
          { name: '颜色', value: '白色' },
          { name: '功能', value: '温水冲洗、座圈加热、暖风烘干' },
          { name: '适用马桶', value: '大部分标准马桶' }
        ],
        detail: '科勒清舒宝智能盖板系列，采用先进技术，提供舒适的温水冲洗、座圈加热和暖风烘干功能。人性化设计，操作简单，适合家庭使用。配合滤水壶使用，提供更健康的水质。',
        detailImages: [
          '/static/banner/banner1.jpeg',
          '/static/banner/banner2.jpeg',
          '/static/banner/banner3.jpeg',
        ],
        specs: [
          {
            name: '规格',
            values: [
              { id: 1, name: '标准版' },
              { id: 2, name: '豪华版' },
              { id: 3, name: '旗舰版' }
            ]
          },
          {
            name: '颜色',
            values: [
              { id: 4, name: '白色' },
              { id: 5, name: '银色' },
              { id: 6, name: '黑色' }
            ]
          }
        ]
      },
      selectedSpec: null,
      showSpec: false,
      quantity: 1,
      isFavorited: false,

      // 图片画廊相关
      showGallery: false,
      currentImageIndex: 0,
      galleryImages: [],

      // 手势相关数据
      scale: 1,
      lastScale: 1,
      translateX: 0,
      translateY: 0,
      lastTranslateX: 0,
      lastTranslateY: 0,
      startX: 0,
      startY: 0,
      isDragging: false,
      isScaling: false,
      initialDistance: 0,
      lastTouchTime: 0
    };
  },
  computed: {
    currentImage() {
      return this.galleryImages[this.currentImageIndex];
    },
    imageStyle() {
      return {
        transform: `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,
        transition: this.isDragging || this.isScaling ? 'none' : 'transform 0.2s ease'
      };
    }
  },
  methods: {
    showSpecPicker() {
      this.showSpec = true;
    },

    closeSpecPicker() {
      this.showSpec = false;
    },

    selectSpec(spec) {
      this.selectedSpec = spec;
    },

    confirmSpec() {
      if (!this.selectedSpec) {
        uni.showToast({
          title: '请选择规格',
          icon: 'none'
        });
        return;
      }
      this.closeSpecPicker();
    },

    increaseQuantity() {
      if (this.quantity < this.productInfo.stock) {
        this.quantity++;
      } else {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        });
      }
    },

    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },

    toggleFavorite() {
      this.isFavorited = !this.isFavorited;
      uni.showToast({
        title: this.isFavorited ? '已收藏' : '已取消收藏',
        icon: 'success'
      });
    },

    addToCart() {
      if (!this.selectedSpec) {
        this.showSpecPicker();
        return;
      }

      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      });
    },

    buyNow() {
      if (!this.selectedSpec) {
        this.showSpecPicker();
        return;
      }

      uni.showToast({
        title: '立即购买',
        icon: 'success'
      });
    },

    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    goToCart() {
      uni.switchTab({
        url: '/pages/cart/cart'
      });
    },

    // 图片画廊方法
    openImageGallery(index) {
      this.galleryImages = this.productInfo.images;
      this.currentImageIndex = index;
      this.showGallery = true;
      this.resetTransform();
    },

    openDetailImageGallery(index) {
      this.galleryImages = this.productInfo.detailImages;
      this.currentImageIndex = index;
      this.showGallery = true;
      this.resetTransform();
    },

    closeGallery() {
      this.showGallery = false;
      this.resetTransform();
    },

    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
        this.resetTransform();
      }
    },

    nextImage() {
      if (this.currentImageIndex < this.galleryImages.length - 1) {
        this.currentImageIndex++;
        this.resetTransform();
      }
    },

    switchImage(index) {
      this.currentImageIndex = index;
      this.resetTransform();
    },

    resetTransform() {
      this.scale = 1;
      this.lastScale = 1;
      this.translateX = 0;
      this.translateY = 0;
      this.lastTranslateX = 0;
      this.lastTranslateY = 0;
      this.isDragging = false;
      this.isScaling = false;
    },

    handleImageTap(e) {
      const currentTime = new Date().getTime();
      const timeDiff = currentTime - this.lastTouchTime;

      // 双击检测 (300ms内连续点击)
      if (timeDiff < 300) {
        if (this.scale === 1) {
          // 双击放大到2倍
          this.scale = 2;
          this.lastScale = 2;
        } else {
          // 双击恢复原始大小
          this.resetTransform();
        }
      }

      this.lastTouchTime = currentTime;
    },

    handleTouchStart(e) {
      if (e.touches.length === 1) {
        // 单指触摸 - 拖拽
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
        this.isDragging = true;

        // 记录开始拖拽时的位置
        this.lastTranslateX = this.translateX;
        this.lastTranslateY = this.translateY;

      } else if (e.touches.length === 2) {
        // 双指触摸 - 缩放
        this.isScaling = true;
        this.handlePinchStart(e);
      }
    },

    handleTouchMove(e) {
      if (e.touches.length === 1 && this.isDragging) {
        // 单指移动 - 拖拽
        const currentX = e.touches[0].clientX;
        const currentY = e.touches[0].clientY;
        const deltaX = currentX - this.startX;
        const deltaY = currentY - this.startY;

        // 只有在缩放状态下才允许拖拽
        if (this.scale > 1) {
          this.translateX = this.lastTranslateX + deltaX;
          this.translateY = this.lastTranslateY + deltaY;

          // 限制拖拽范围，防止图片被拖出可视区域
          this.limitTranslation();
        }
        // 注意：这里不再设置 isDragging = false，保持拖拽状态

      } else if (e.touches.length === 2 && this.isScaling) {
        // 双指移动 - 缩放
        this.handlePinchMove(e);
      }
    },

    handleTouchEnd(e) {
      if (e.changedTouches.length === 1 && this.isDragging) {
        const endX = e.changedTouches[0].clientX;
        const endY = e.changedTouches[0].clientY;
        const deltaX = endX - this.startX;
        const deltaY = endY - this.startY;

        // 如果是在未缩放状态下水平滑动超过50px，切换图片
        if (this.scale === 1 && Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            this.prevImage(); // 向右滑动，显示上一张
          } else {
            this.nextImage(); // 向左滑动，显示下一张
          }
        }

        this.isDragging = false;
      } else if (e.changedTouches.length === 2) {
        this.isScaling = false;
      }
    },

    handlePinchStart(e) {
      // 记录初始距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      this.initialDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );
      this.lastScale = this.scale;

      // 记录缩放中心点，用于调整平移
      this.scaleCenterX = (touch1.clientX + touch2.clientX) / 2;
      this.scaleCenterY = (touch1.clientY + touch2.clientY) / 2;
      this.lastTranslateX = this.translateX;
      this.lastTranslateY = this.translateY;
    },

    handlePinchMove(e) {
      // 计算当前距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const currentDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );

      // 计算缩放比例
      const scaleRatio = currentDistance / this.initialDistance;
      const newScale = this.lastScale * scaleRatio;

      // 限制缩放范围
      this.scale = Math.max(0.5, Math.min(5, newScale));

      // 计算缩放中心点
      const currentCenterX = (touch1.clientX + touch2.clientX) / 2;
      const currentCenterY = (touch1.clientY + touch2.clientY) / 2;

      // 调整平移，使缩放中心保持稳定
      const scaleChange = this.scale - this.lastScale;
      this.translateX = this.lastTranslateX + (currentCenterX - this.scaleCenterX) * scaleChange * 0.5;
      this.translateY = this.lastTranslateY + (currentCenterY - this.scaleCenterY) * scaleChange * 0.5;

      // 限制拖拽范围
      this.limitTranslation();
    },

    limitTranslation() {
      // 根据缩放比例计算最大平移范围
      // 缩放越大，允许的平移范围也越大
      const maxTranslate = (this.scale - 1) * 100;

      this.translateX = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateX));
      this.translateY = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateY));
    }
  }
};
</script>